<!--
 * @Author: y001554
 * @Date: 2023-01-16 20:11:08
 * @LastEditors: y001554
 * @LastEditTime: 2023-02-06 20:07:19
 * @FilePath: \ylwl\src\demos\cache.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by FE/ylwl, All Rights Reserved. 
-->

<template>
  <div style="width: 600px; background: #f1f1f1; padding: 0 10px">
    <div>浏览器缓存控制</div>
    <M-Cache
      v-model="treevalue"
      :prop="{ keyName: 'id' }"
      :checkable="true"
      :data="demo"
    />
    <h4>{{ treevalue }}</h4>
    <el-button type="primary" @click="test">初始值设置</el-button>
    <!-- <el-button @click="reset">ref调用测试</el-button>  -->
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, Ref } from 'vue'
// import utils from '@@/utils/index'
defineOptions({
  name: 'Demo1'
})
const treevalue = ref(['2'])
interface FormType {
  citys: string | number | Array<any>
}
//士大夫撒旦
const demo = ref([
  {
    label: '一级 1',
    level: 1,
    id: 1,
    children: [
      {
        label: '二级 1-1',
        level: 2,
        id: '1_1',
        children: [
          {
            label: '三级 1-1-1',
            level: 3,
            id: '1-1-1'
          }
        ]
      }
    ]
  },
  {
    label: '一级 2',
    level: 1,
    open: true, // 新增
    disableToggle: false, // 新增
    disabled: false, // 新增
    id: '2',
    children: [
      {
        label: '二级 2-1',
        level: 2,
        id: '2-1',
        open: true, // 新
        children: [
          {
            label: '三级 2-1-1',
            level: 3,
            id: '2-1-3'
          }
        ]
      },
      {
        label: '二级 2-2',
        level: 2,
        id: '2-2',
        open: true, // 新
        children: [
          {
            label: '三级 2-2-4',
            level: 3,
            id: '2-3-4'
          }
        ]
      }
    ]
  }
])

const test = () => {
  treevalue.value = ['2-1', '2', '2-2', '2-1-3', '2-3-4']
}

// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
</script>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
